<template>
  <el-form class="search-container" :label-width="SearchConfig.labelWidth">
    <el-row>
      <el-col :span="SearchConfig.span" v-for="(item,index) in SearchConfig.items" :key="index">
        <el-form-item :label="item.label">
          <!-- 文本框 input / password -->
          <el-input
              v-model="searchData[`${item.model}`]"
              v-if="item.type === 'input' || item.type === 'password'"
              :placeholder="item.placeholder"
              :show-password="item.type === 'password'"
              :clearable="item.clearable"
          />
          <!-- 数字范围 number-range -->
          <div v-if="item.type === 'number-range'" class="rangecontainer">
              <el-input
                  v-model="searchData[`${item.model}`][0]"
                  :placeholder="item.placeholder"
                  :clearable="item.clearable"
                  @input="checkNumberFormat($event,item,0)"
              />
            <div class="line">-</div>
              <el-input
                  v-model="searchData[`${item.model}`][1]"
                  :placeholder="item.placeholder"
                  :clearable="item.clearable"
                  @input="checkNumberFormat($event,item,1)"
              />
          </div>
          <!-- type是下拉框 -->
          <el-select v-model="searchData[`${item.model}`]"
                     :placeholder="item.placeholder"
                     style="width: 100%" v-else-if="item.type === 'select'"
                      clearable>
            <el-option
                v-for="(option,index) in item.options"
                :key="index"
                :value="option.value"
                :label="option.title"
            ></el-option>
          </el-select>
          <!-- 时间选择器timepicker -->
          <!-- 时间范围选择器timepicker-range -->
          <!-- 日期选择器datepicker -->
          <!-- 日期范围选择器datepicker-range -->
          <div v-if="item.type === 'datepicker-range'" class="rangecontainer">
              <el-date-picker
                  class="datepicker"
                  v-model="searchData[`${item.model}`][0]"
                  type="date"
                  :clearable="item.clearable"
                  :placeholder="item.placeholder">
              </el-date-picker>
              <div class="line">-</div>
              <el-date-picker
                  class="datepicker"
                  v-model="searchData[`${item.model}`][1]"
                  type="date"
                  :clearable="item.clearable"
                  :placeholder="item.placeholder">
              </el-date-picker>
          </div>
          <!-- 日期时间选择器datetimepicker -->
          <!-- 日期时间范围选择器datetimepicker-range -->

        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="buttons">
        <slot name="buttons"></slot>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {validateNumber1} from "@/utils/validateUtils";
export default {
  name: "index",
  props: {
    SearchConfig: {
      type: Object,
      // 如果默认数据是数组或者对象时需要通过函数返回默认数组或对象
      default: () => {},
      required: true
    },
    // 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，
    // 在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
    searchData: {
      type: Object,
      required: true
    }
  },
  methods: {
    resetFields() {
      Object.keys(this.searchData).forEach(key => {
        this.searchData[key] = ''
      })
    },
    checkNumberFormat(val,item,index) {
      this.searchData[`${item.model}`][index] = validateNumber1(val)
    }
  }
}
</script>

<style scoped>
.search-container{
  box-sizing: border-box;
  padding: 10px 20px;
}

.search-container  .buttons {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}



.rangecontainer {
  display: flex;
  justify-content: space-around;
}

.rangecontainer .line {
  text-align: center;
}
.rangecontainer .datepicker {
  width: 130px;
}
</style>